<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('可展开行')}`">{{ $t('可展开行') }}</t>
            <li>
                <span class="d-code">index-config</span>对象内的
                <span class="s-code">type</span>为
                <span class="s-code">"expand"</span>
                时，首列可设置成为可展开行的按钮列；此时，你可以配置一个名为
                <span class="s-code">#expand</span>的插槽，将自定义内容插入展开行内
            </li>
            <li>
                <span class="d-code">expand-row-keys</span>可以配置默认展开的行，其值为数据行内
                <span class="d-code">row-key</span>字段组成的数组
            </li>
        </template>
        <div style="margin-bottom: 10px;">
            <el-button @click="handleExpand">展开第2行</el-button>
            <el-button @click="handleToggle">切换第1行的展开状态</el-button>
        </div>
        <sib-table
            ref="sibTable"
            row-key="rowId"
            :expand-row-keys="[7]"
            :index-config="indexConfig"
            :table-column="tableColumn"
            :table-data="tableData">
            <template #expand="{ row, index, realIndex }">
                <p>行数据：{{ row }}</p>
                <p>在当前页内的行索引：{{ index }}</p>
                <p>在所有数据内的行索引：{{ realIndex }}</p>
            </template>
        </sib-table>
    </example>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const sibTable = ref(null);
        const tableData = ref(Array(30).fill().map((_, i) => ({
            rowId: i + 1,
            name: `张三${i + 1}号`,
            sex: i % 2 ? '男' : '女',
            height: 165 + i,
            status: i % 2,
            age: i + 10,
            avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        })));
        return {
            sibTable,
            indexConfig: { type: 'expand' },
            tableColumn: [
                { label: '姓名', code: 'name' },
                { label: '性别', code: 'sex' },
                { label: '年龄', code: 'age' },
                { label: '照片', code: 'avatar' },
                { label: '身高', code: 'height' },
                { label: '状态', code: 'status' },
            ],
            tableData,
            handleExpand() {
                sibTable.value.toggleRowExpansion(tableData.value[1], true);
            },
            handleToggle() {
                sibTable.value.toggleRowExpansion(tableData.value[0]);
            },
            templateString: `<template>
    <div class="example-box">
        <div style="margin-bottom: 10px;">
            <el-button @click="handleExpand">展开第2行</el-button>
            <el-button @click="handleToggle">切换第1行的展开状态</el-button>
        </div>
        <sib-table
            ref="sibTable"
            row-key="rowId"
            :expand-row-keys="[7]"
            :index-config="indexConfig"
            :table-column="tableColumn"
            :table-data="tableData">
            <template #expand="{ row, index, realIndex }">
                <p>行数据：{{ row }}</p>
                <p>在当前页内的行索引：{{ index }}</p>
                <p>在所有数据内的行索引：{{ realIndex }}</p>
            </template>
        </sib-table>
    </div>
</template>

<script>
export default {
    setup() {
        const sibTable = ref(null);
        const tableData = ref(Array(30).fill().map((_, i) => ({
            rowId: i + 1,
            name: \`张三\${i + 1}号\`,
            sex: i % 2 ? '男' : '女',
            height: 165 + i,
            status: i % 2,
            age: i + 10,
            avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        })));
        return {
            sibTable,
            indexConfig: { type: 'expand' },
            tableColumn: [
                { label: '姓名', code: 'name' },
                { label: '性别', code: 'sex' },
                { label: '年龄', code: 'age' },
                { label: '照片', code: 'avatar' },
                { label: '身高', code: 'height' },
                { label: '状态', code: 'status' },
            ],
            tableData,
            handleExpand() {
                sibTable.value.toggleRowExpansion(tableData.value[1], true);
            },
            handleToggle() {
                sibTable.value.toggleRowExpansion(tableData.value[0]);
            },
        };
    },
};
<\/script>`,
        };
    },
};
</script>
